<template>
    <div class="taobao-cart">
       <!-- 清空购物车和删除选中商品按钮 -->
    <div class="cart-actions">
      <button @click="clearCart" class="action-btn clear-btn">清空购物车</button>
      <button @click="deleteSelectedItems" class="action-btn delete-selected-btn">删除选中商品</button>
    </div>
      <div
        v-for="item in cartStore.items"
        :key="item.productId"
        class="cart-item"
      >
        <div class="check-box" @click="toggleCheck(item.cartId)">
          <div class="check-circle" :class="{ checked: item.checked }">
            <el-icon v-if="item.checked" class="check-icon">
              <Check />
            </el-icon>
          </div>
        </div>
        <div class="item-img">
          <img :src="item.mainImage" :alt="item.productName" />
        </div>

        <div class="item-info">
          <h3 class="item-title">{{ item.productName }}</h3>
          <p class="price">
            ￥{{ item.price }}
            <span v-if="item.originalPrice" class="original-price"
              >￥{{ item.originalPrice }}</span
            >
          </p>
          <p
            v-if="item.originalPrice && item.price < item.originalPrice"
            class="savings-info"
          >
            <span class="savings-label">省</span>￥{{ calculateSavings(item) }}
          </p>
        </div>

        <div class="quantity-control">
          <div class="quantity-buttons">
            <button
              class="round-btn minus"
              @click="updateQuantity(item.productId, -1)"
              :disabled="item.quantity <= 1"
            >
              -
            </button>
            <span class="quantity">{{ item.quantity }}</span>
            <button
              class="round-btn plus"
              @click="updateQuantity(item.productId, 1)"
            >
              +
            </button>
          </div>
          <div class="delete-btn" @click="deleteItem(item.cartId)">
            <el-icon>
              <Delete />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script setup>
  import { Check, Delete } from "@element-plus/icons-vue";
  import { useCartStore } from "@/stores/cartStore"; // Import your Pinia Cart Store
  import { ElMessage } from 'element-plus';

  // Get an instance of your Pinia store
  const cartStore = useCartStore();

  // --- Action handlers, directly calling Pinia Store actions ---

  const toggleCheck = async (cartId) => {
    // Call the Pinia action to update the item's checked status
    // This action should in turn call your backend API
    await cartStore.toggleItemChecked(cartId);
    // The store will be refreshed by the action after API success
  };

  const updateQuantity = async (productId, sign) => {
    const item = cartStore.items.find((i) => i.productId === productId);
    if (item) {
      const newQuantity = item.quantity + sign;
      if (newQuantity > 0) {
        // Ensure quantity doesn't go below 1
        // Call the Pinia action to update the item's quantity
        // This action should in turn call your backend API
        await cartStore.updateItemQuantity(item.cartId, newQuantity);
        // The store will be refreshed by the action after API success
      }
    }
  };

  const deleteItem = async (cartId) => {
    // Call the Pinia action to remove the item
    // This action should in turn call your backend API
    await cartStore.removeItem(cartId);
    // The store will be refreshed by the action after API success
  };

  // --- Helper function (remains mostly unchanged) ---
  const calculateSavings = (item) => {
    if (item.originalPrice && item.price < item.originalPrice) {
      const savingsPerUnit = item.originalPrice - item.price;
      const totalSavingsForItem = savingsPerUnit * item.quantity;
      return totalSavingsForItem.toFixed(2);
    }
    return "0.00";
  };
  const clearCart = async () => {
  // 调用 Pinia Store 里的清空购物车动作
  await cartStore.clearCart();
  // 这里可做成功提示或者错误处理
};

const deleteSelectedItems = async () => {
  // 找出所有选中的购物车项ID
  const selectedIds = cartStore.items
    .filter(item => item.checked)
    .map(item => item.cartId);
  if (selectedIds.length === 0) {
    ElMessage.info('请先选择要删除的商品');
    return;
  }
  // 调用 Pinia Store 删除多个项的动作
  await cartStore.removeItems(selectedIds);
  // 这里也可做成功提示或者错误处理
};

  // --- REMOVED: No longer needed with Pinia Store ---
  // defineProps(["shopCartData"]); // No longer accept props for cart data
  // defineEmits([
  //   "changeShopCartData",
  //   "changeNumber",
  //   "deleteProduct",
  // ]); // No longer emit events for cart data changes

  // const localShopCartData = ref([...props.shopCartData]); // No longer use local ref for cart data

  // watch(
  //   localShopCartData,
  //   (newVal) => {
  //     localStorage.setItem("shopCartData", JSON.stringify(newVal));
  //   },
  //   { deep: true }
  // ); // No longer watch local storage
  </script>

  <style scoped>
  /* Your existing styles remain unchanged */
  .taobao-cart {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
  }

  .cart-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
    position: relative;
  }

  /* 圆形选择按钮 */
  .check-box {
    margin-right: 12px;
    cursor: pointer;
  }

  .check-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .check-circle.checked {
    background-color: #ff5000;
    border-color: #ff5000;
  }

  .check-icon {
    color: white;
    font-size: 12px;
    font-weight: bold;
  }

  /* 左侧图片 */
  .item-img {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  /* 中间商品信息 */
  .item-info {
    flex: 1;
    min-width: 0;
    padding-right: 15px;
  }

  .item-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .price {
    color: #ff5000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .original-price {
    color: #999;
    font-size: 0.8em;
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: normal;
  }

  .savings-info {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    align-items: center;
  }

  .savings-label {
    background-color: #ff5000;
    color: white;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 11px;
    display: inline-block;
    line-height: 1;
  }

  /* 右边圆形数量按钮 */
  .quantity-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .quantity-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .delete-btn {
    position: absolute;
    top: 80px;
    right: 15px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px;
    border-radius: 4px;
    font-size: 20px;
  }

  .delete-btn:hover {
    color: #ff5000;
  }

  .round-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
  }

  .round-btn:hover {
    background: #eee;
  }

  .round-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .quantity {
    min-width: 30px;
    text-align: center;
    font-size: 14px;
  }

  /* 交互效果 */
  .cart-item:hover {
    background: #fafafa;
  }
  </style>